<template>
	<view class="page">
		<view class="orderlists">
			<view class="orderlist" v-for="(item,index) in registerlists" :key="index">
				<view class="status" v-if="item.status=='待就诊'" style="background-color: rgba(230, 255, 251, 1); color: #13C2C2;">
					挂号成功
				</view>
				<view class="status" v-else style="background-color: rgba(255, 247, 230, 1); color: #FA8C16;">
					{{item.status}}
				</view>
				<view class="doctor_info">
					<image style="width: 90rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E5%88%97%E8%A1%A8/u809.png" mode="widthFix"></image>
					<view class="textInfo">
						<view class="name_call">
							<view class="name">
								{{item.doctor}}
							</view>
							<view class="call">
								主任医师
							</view>
						</view>
						<view class="depart_campus">
							<view class="depart">
								{{item.department}}
							</view>
							<view class="campus">
								四川省保健院南苑
							</view>
						</view>
					</view>
				</view>
				<view class="patient_info">
					<view class="info_list">
						<view class="title">
							就诊人
						</view>
						<view class="content">
							{{item.name}}
						</view>
					</view>
					<view class="info_list">
						<view class="title">
							预约时间
						</view>
						<view class="content">
							{{item.date}}({{item.date.split(' ')[1]=='14:00-18:00'?'下午':'上午'}})
						</view>
					</view>
					<view class="info_list">
						<view class="title">
							挂号费用
						</view>
						<view class="content">
							￥{{item.money.toFixed(2)}}
						</view>
					</view>
				</view>
				<view class="note_info" v-if="item.status=='待就诊'" style="background-color: rgba(230, 244, 255, 1); color: #1677FF;">
					该挂号订单还未就诊，请按预约时间及时就诊
				</view>
				<view class="operte" v-if="item.status=='待就诊'">
					<button class="btn" style="background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E6%8C%82%E5%8F%B7%E8%AE%A2%E5%8D%95/u7988.svg'); color: #000;" @click="consel(item.register_id)">取消挂号</button>
					
					<button class="btn" @click="details">挂号详情</button>
				</view>
				<view class="operte" v-else>
					<button class="btn" @click="Reregister">重新挂号</button>
				</view>
			</view>
		</view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="warn" cancelText="关闭" confirmText="确定" title="提示" content="确定取消挂号吗?" @confirm="dialogConfirm"
				@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
	import { onShow } from '@dcloudio/uni-app'
	import api from '../../src/utils/api.js'
	import { reactive, ref } from 'vue'
	const alertDialog = ref(null)
	const registerID = ref(0)
	const optionInfo = ref({
		dateInfo:'1',
		doctorID:'1',
		farewell:'上午'
	})
	const registerlists = reactive([])
	onShow(()=>{
		api('/appregisterinfo',{
			userid:uni.getStorageSync('userid')
		}).then(res=>{
			registerlists.push(...res.dataes)
		}).catch(err=>{
			console.log(err)
		})
	})
	// 挂号详情
	const details = () =>{
		uni.navigateTo({
			url:'/pages/Registration_details/Registration_details?'+new URLSearchParams(optionInfo.value).toString()
		})
	}
	// 取消挂号
	const consel = (id) => {
		console.log('取消挂号')
		registerID.value = id
		alertDialog.value.open()
	}
	// 确认取消
	const dialogConfirm = () => {
		console.log('确认取消',registerID.value)
		api('/appregisterconcel',{
			register_id:registerID.value
		},'POST').then(res=>{
			console.log(res)
			if(res.state==200){
				registerlists.splice(0)
				api('/appregisterinfo',{
					userid:uni.getStorageSync('userid')
				}).then(res=>{
					uni.showToast({
						title:'取消成功'
					})
					alertDialog.value.close()
					registerlists.push(...res.dataes)
				}).catch(err=>{
					console.log(err)
				})
				alertDialog.value.close()
			}
		}).catch(err=>{
			console.log(err)
		})
	}
	// 关闭
	const dialogClose = () => {
		alertDialog.value.close()
	}
	// 重新挂号
	const Reregister = () => {
		console.log('重新挂号')
		uni.reLaunch({
			url:'/pages/Outpatient_registration/Outpatient_registration'
		})
		// 门诊挂号
	}
</script>

<style lang="scss" scoped>
	.page{
		padding: 30rpx;
		background-color: #f2f2f2;
		min-height: 100vh;
		box-sizing: border-box;
		.orderlists{
			.orderlist{
				padding:30rpx 32rpx 34rpx 44rpx;
				background-color: #fff;
				box-sizing: border-box;
				border-radius: 16rpx;
				margin-bottom: 30rpx;
				position: relative;
				.status{
					padding: 13rpx;
					box-sizing: border-box;
					font-family: 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
					font-size: 24rpx;
					border-radius: 60rpx 0 0 60rpx;
					position: absolute;
					right: 0;
					top: 20rpx;
				}
				.doctor_info{
					display: flex;
					padding-bottom: 34rpx;
					border-bottom: 2rpx solid #f2f2f2;
					box-sizing: border-box;
					.textInfo{
						margin-left: 40rpx;
						font-family: 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
						font-size: 28rpx;
						color: #1F1F1F;
						.name_call{
							display: flex;
							align-items: baseline;
							.name{
								font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI', sans-serif;
								font-weight: 700;
								font-size: 36rpx;
								width: 140rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
							.call{
								font-size: 26rpx;
								margin-left: 36rpx;
							}
						}
						.depart_campus{
							margin-top: 4rpx;
							display: flex;
							align-items: center;
							.campus{
								margin-left: 28rpx;
							}
						}
					}
				}
				.patient_info{
					padding-top: 30rpx;
					box-sizing: border-box;
					.info_list{
						height: 40rpx;
						display: flex;
						align-items: center;
						font-family: 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
						font-size: 28rpx;
						color: #000;
						margin-bottom: 16rpx;
						.title{
							color: #7f7f7f;
							width: 114rpx;
							margin-right: 62rpx;
						}
					}
				}
				.note_info{
					width: 100%;
					height: 58rpx;
					line-height: 58rpx;
					text-align: center;
					border-radius: 4rpx;
					font-family: 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
					font-size: 24rpx;
					margin-top: 28rpx;
				}
				.operte{
					display: flex;
					justify-content: flex-end;
					margin-top: 30rpx;
					.btn{
						width: 200rpx;
						height: 70rpx;
						line-height: 70rpx;
						margin: 0 0 0 30rpx !important;
						background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E8%87%AA%E5%8A%A9%E5%8F%96%E5%8F%B7/u3536.svg');
						background-size: cover;
						font-family: 'ArialMT', 'Arial', sans-serif;
						font-size: 24rpx;
						color: #fff;
					}
				}
			}
		}
	}       
</style>
